<!DOCTYPE html>
<!-- Template Name: Clip-Two - Responsive Admin Template build with Twitter Bootstrap 3.x | Author: ClipTheme -->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>Clip-Two - Responsive Admin Template</title>
		<!-- start: META -->
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: GOOGLE FONTS -->
		<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
		<!-- end: GOOGLE FONTS -->
		<!-- start: MAIN CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="vendor/themify-icons/themify-icons.min.css">
		<link href="vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
		<link href="vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
		<link href="vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
		<!-- end: MAIN CSS -->
		<!-- start: CLIP-TWO CSS -->
		<link rel="stylesheet" href="assets/css/styles.css">
		<link rel="stylesheet" href="assets/css/plugins.css">
		<link rel="stylesheet" href="assets/css/themes/theme-1.css" id="skin_color" />
		<!-- end: CLIP-TWO CSS -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
	</head>
	<!-- end: HEAD -->
	<body>
		<div id="app">
			<!-- sidebar -->
			<div class="sidebar app-aside" id="sidebar">
				<div class="sidebar-container perfect-scrollbar">
					<nav>
						<!-- start: SEARCH FORM -->
						<div class="search-form">
							<a class="s-open" href="#">
								<i class="ti-search"></i>
							</a>
							<form class="navbar-form" role="search">
								<a class="s-remove" href="#" target=".navbar-form">
									<i class="ti-close"></i>
								</a>
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<button class="btn search-button" type="submit">
										<i class="ti-search"></i>
									</button>
								</div>
							</form>
						</div>
						<!-- end: SEARCH FORM -->
						<!-- start: MAIN NAVIGATION MENU -->
						<div class="navbar-title">
							<span>Main Navigation</span>
						</div>
						<ul class="main-navigation-menu">
							<li>
								<a href="index.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-home"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Dashboard </span>
										</div>
									</div>
								</a>
							</li>
							<li class="active open">
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-settings"></i>
										</div>
										<div class="item-inner">
											<span class="title"> UI Elements </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="ui_elements.html">
											<span class="title"> Elements </span>
										</a>
									</li>
									<li>
										<a href="ui_buttons.html">
											<span class="title"> Buttons </span>
										</a>
									</li>
									<li>
										<a href="ui_links.html">
											<span class="title"> Links </span>
										</a>
									</li>
									<li>
										<a href="ui_icons.html">
											<span class="title"> Font Awesome Icons </span>
										</a>
									</li>
									<li class="active">
										<a href="ui_line_icons.html">
											<span class="title"> Linear Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_modals.html">
											<span class="title"> Modals </span>
										</a>
									</li>
									<li>
										<a href="ui_toggle.html">
											<span class="title"> Toggle </span>
										</a>
									</li>
									<li>
										<a href="ui_tabs_accordions.html">
											<span class="title"> Tabs &amp; Accordions </span>
										</a>
									</li>
									<li>
										<a href="ui_panels.html">
											<span class="title"> Panels </span>
										</a>
									</li>
									<li>
										<a href="ui_notifications.html">
											<span class="title"> Notifications </span>
										</a>
									</li>
									<li>
										<a href="ui_treeview.html">
											<span class="title"> Treeview </span>
										</a>
									</li>
									<li>
										<a href="ui_media.html">
											<span class="title"> Media Object </span>
										</a>
									</li>
									<li>
										<a href="ui_nestable.html">
											<span class="title"> Nestable List </span>
										</a>
									</li>
									<li>
										<a href="ui_typography.html">
											<span class="title"> Typography </span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layout-grid2"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Tables </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="table_basic.html">
											<span class="title">Basic Tables</span>
										</a>
									</li>
									<li>
										<a href="table_responsive.html">
											<span class="title">Responsive Tables</span>
										</a>
									</li>
									<li>
										<a href="table_data.html">
											<span class="title">Advanced Data Tables</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pencil-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Forms </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="form_elements.html">
											<span class="title">Form Elements</span>
										</a>
									</li>								
									<li>
										<a href="form_text_editor.html">
											<span class="title">Text Editor</span>
										</a>
									</li>
									<li>
										<a href="form_wizard.html">
											<span class="title">Form Wizard</span>
										</a>
									</li>
									<li>
										<a href="form_validation.html">
											<span class="title">Form Validation</span>
										</a>
									</li>
									<li>
										<a href="form_image_cropping.html">
											<span class="title">Image Cropping</span>
										</a>
									</li>
									<li>
										<a href="form_multiple_upload.html">
											<span class="title">Multiple File Upload</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-user"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Login </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="login_signin.html">
											<span class="title"> Login Form </span>
										</a>
									</li>
									<li>
										<a href="login_registration.html">
											<span class="title"> Registration Form </span>
										</a>
									</li>
									<li>
										<a href="login_forgot.html">
											<span class="title"> Forgot Password Form </span>
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											<span class="title">Lock Screen</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layers-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Pages </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="pages_user_profile.html">
											<span class="title">User Profile</span>
										</a>
									</li>
									<li>
										<a href="pages_invoice.html">
											<span class="title">Invoice</span>
										</a>
									</li>
									<li>
										<a href="pages_timeline.html">
											<span class="title">Timeline</span>
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											<span class="title">Calendar</span>
										</a>
									</li>
									<li>
										<a href="pages_messages.html">
											<span class="title">Messages</span>
										</a>
									</li>
									<li>
										<a href="pages_blank_page.html">
											<span class="title">Blank Page</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-package"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Utilities </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="utilities_search_result.html">
											<span class="title">Search Results</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_404.html">
											<span class="title">Error 404</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_500.html">
											<span class="title">Error 500</span>
										</a>
									</li>
									<li>
										<a href="utilities_pricing_table.html">
											<span class="title">Pricing Table</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-folder"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 3 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-menu-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 4 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="maps.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-location-pin"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Maps </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="charts.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pie-chart"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Charts </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: MAIN NAVIGATION MENU -->
						<!-- start: CORE FEATURES -->
						<div class="navbar-title">
							<span>Core Features</span>
						</div>
						<ul class="folders">
							<li>
								<a href="pages_calendar.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Calendar </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="pages_messages.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-folder-open-o fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Messages </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: CORE FEATURES -->
						<!-- start: DOCUMENTATION BUTTON -->
						<div class="wrapper">
							<a href="documentation.html" class="button-o">
								<i class="ti-help"></i>
								<span>Documentation</span>
							</a>
						</div>
						<!-- end: DOCUMENTATION BUTTON -->
					</nav>
				</div>
			</div>
			<!-- / sidebar -->
			<div class="app-content">
				<!-- start: TOP NAVBAR -->
				<header class="navbar navbar-default navbar-static-top">
					<!-- start: NAVBAR HEADER -->
					<div class="navbar-header">
						<a href="#" class="sidebar-mobile-toggler pull-left hidden-md hidden-lg" class="btn btn-navbar sidebar-toggle" data-toggle-class="app-slide-off" data-toggle-target="#app" data-toggle-click-outside="#sidebar">
							<i class="ti-align-justify"></i>
						</a>
						<a class="navbar-brand" href="#">
							<img src="assets/images/logo.png" alt="Clip-Two"/>
						</a>
						<a href="#" class="sidebar-toggler pull-right visible-md visible-lg" data-toggle-class="app-sidebar-closed" data-toggle-target="#app">
							<i class="ti-align-justify"></i>
						</a>
						<a class="pull-right menu-toggler visible-xs-block" id="menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<span class="sr-only">Toggle navigation</span>
							<i class="ti-view-grid"></i>
						</a>
					</div>
					<!-- end: NAVBAR HEADER -->
					<!-- start: NAVBAR COLLAPSE -->
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-right">
							<!-- start: MESSAGES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<span class="dot-badge partition-red"></span> <i class="ti-comment"></i> <span>MESSAGES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> Unread messages</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<ul>
												<li class="unread">
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-2.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Nicole Bell</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time"> Just Now</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-3.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Steven Thompson</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">8 hrs</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-5.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Kenneth Ross</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">14 hrs</span>
															</div>
														</div>
													</a>
												</li>
											</ul>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: MESSAGES DROPDOWN -->
							<!-- start: ACTIVITIES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-check-box"></i> <span>ACTIVITIES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> You have new notifications</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<div class="list-group no-margin">
												<a class="media list-group-item" href="">
													<img class="img-circle" alt="..." src="assets/images/avatar-1.jpg">
													<span class="media-body block no-margin"> Use awesome animate.css <small class="block text-grey">10 minutes ago</small> </span>
												</a>
												<a class="media list-group-item" href="">
													<span class="media-body block no-margin"> 1.0 initial released <small class="block text-grey">1 hour ago</small> </span>
												</a>
											</div>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: ACTIVITIES DROPDOWN -->
							<!-- start: LANGUAGE SWITCHER -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-world"></i> English
								</a>
								<ul role="menu" class="dropdown-menu dropdown-light fadeInUpShort">
									<li>
										<a href="#" class="menu-toggler">
											Deutsch
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											English
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											Italiano
										</a>
									</li>
								</ul>
							</li>
							<!-- start: LANGUAGE SWITCHER -->
							<!-- start: USER OPTIONS DROPDOWN -->
							<li class="dropdown current-user">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<img src="assets/images/avatar-1.jpg" alt="Peter"> <span class="username">Peter <i class="ti-angle-down"></i></i></span>
								</a>
								<ul class="dropdown-menu dropdown-dark">
									<li>
										<a href="pages_user_profile.html">
											My Profile
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											My Calendar
										</a>
									</li>
									<li>
										<a hef="pages_messages.html">
											My Messages (3)
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											Lock Screen
										</a>
									</li>
									<li>
										<a href="login_signin.html">
											Log Out
										</a>
									</li>
								</ul>
							</li>
							<!-- end: USER OPTIONS DROPDOWN -->
						</ul>
						<!-- start: MENU TOGGLER FOR MOBILE DEVICES -->
						<div class="close-handle visible-xs-block menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<div class="arrow-left"></div>
							<div class="arrow-right"></div>
						</div>
						<!-- end: MENU TOGGLER FOR MOBILE DEVICES -->
					</div>
					<a class="dropdown-off-sidebar" data-toggle-class="app-offsidebar-open" data-toggle-target="#app" data-toggle-click-outside="#off-sidebar">
						&nbsp;
					</a>
					<!-- end: NAVBAR COLLAPSE -->
				</header>
				<!-- end: TOP NAVBAR -->
				<div class="main-content" >
					<div class="wrap-content container" id="container">
						<!-- start: PAGE TITLE -->
						<section id="page-title" class="page-title-center">
							<div class="row">
								<div class="col-sm-8 col-sm-offset-2">
									<h1 class="mainTitle">Linear Icons</h1>
									<span class="mainDescription">Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7</span>
									<ol class="breadcrumb">
									<li>
										<span>UI Elements</span>
									</li>
									<li class="active">
										<span>Linear Icons</span>
									</li>
								</ol>
								</div>
							</div>
						</section>
						<!-- end: PAGE TITLE -->
						<!-- start: FONTAWESOME ICONS -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Arrows &amp; Direction Icons </h5>
									<div class="row the-icons">
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-up"></i> ti-arrow-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-right"></i> ti-arrow-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-left"></i> ti-arrow-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-down"></i> ti-arrow-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrows-vertical"></i> ti-arrows-vertical
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrows-horizontal"></i> ti-arrows-horizontal
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-up"></i> ti-angle-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-right"></i> ti-angle-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-left"></i> ti-angle-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-down"></i> ti-angle-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-double-up"></i> ti-angle-double-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-double-right"></i> ti-angle-double-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-double-left"></i> ti-angle-double-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-angle-double-down"></i> ti-angle-double-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-move"></i> ti-move
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-fullscreen"></i> ti-fullscreen
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-top-right"></i> ti-arrow-top-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-top-left"></i> ti-arrow-top-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-circle-up"></i> ti-arrow-circle-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-circle-right"></i> ti-arrow-circle-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-circle-left"></i> ti-arrow-circle-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrow-circle-down"></i> ti-arrow-circle-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-arrows-corner"></i> ti-arrows-corner
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-split-v"></i> ti-split-v
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-split-v-alt"></i> ti-split-v-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-split-h"></i> ti-split-h
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hand-point-up"></i> ti-hand-point-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hand-point-right"></i> ti-hand-point-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hand-point-left"></i> ti-hand-point-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hand-point-down"></i> ti-hand-point-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-back-right"></i> ti-back-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-back-left"></i> ti-back-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-exchange-vertical"></i> ti-exchange-vertical
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Web App Icons</h5>
									<div class="row the-icons">
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-wand"></i> ti-wand
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-save"></i> ti-save
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-save-alt"></i> ti-save-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-direction"></i> ti-direction
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-direction-alt"></i> ti-direction-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-user"></i> ti-user
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-link"></i> ti-link
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-unlink"></i> ti-unlink
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-trash"></i> ti-trash
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-target"></i> ti-target
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-tag"></i> ti-tag
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-desktop"></i> ti-desktop
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-tablet"></i> ti-tablet
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-mobile"></i> ti-mobile
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-email"></i> ti-email
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-star"></i> ti-star
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-spray"></i> ti-spray
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-signal"></i> ti-signal
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shopping-cart"></i> ti-shopping-cart
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shopping-cart-full"></i> ti-shopping-cart-full
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-settings"></i> ti-settings
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-search"></i> ti-search
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-zoom-in"></i> ti-zoom-in
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-zoom-out"></i> ti-zoom-out
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-cut"></i> ti-cut
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-ruler"></i> ti-ruler
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-ruler-alt-2"></i> ti-ruler-alt-2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-ruler-pencil"></i> ti-ruler-pencil
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-ruler-alt"></i> ti-ruler-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bookmark"></i> ti-bookmark
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bookmark-alt"></i> ti-bookmark-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-reload"></i> ti-reload
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-plus"></i> ti-plus
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-minus"></i> ti-minus
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-close"></i> ti-close
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pin"></i> ti-pin
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pencil"></i> ti-pencil
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pencil-alt"></i> ti-pencil-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-paint-roller"></i> ti-paint-roller
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-paint-bucket"></i> ti-paint-bucket
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-na"></i> ti-na
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-medall"></i> ti-medall
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-medall-alt"></i> ti-medall-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-marker"></i> ti-marker
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-marker-alt"></i> ti-marker-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-lock"></i> ti-lock
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-unlock"></i> ti-unlock
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-location-arrow"></i> ti-location-arrow
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout"></i> ti-layout
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layers"></i> ti-layers
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layers-alt"></i> ti-layers-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-key"></i> ti-key
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-image"></i> ti-image
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-heart"></i> ti-heart
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-heart-broken"></i> ti-heart-broken
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hand-stop"></i> ti-hand-stop
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hand-open"></i> ti-hand-open
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hand-drag"></i> ti-hand-drag
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-flag"></i> ti-flag
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-flag-alt"></i> ti-flag-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-flag-alt-2"></i> ti-flag-alt-2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-eye"></i> ti-eye
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-import"></i> ti-import
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-export"></i> ti-export
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-cup"></i> ti-cup
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-crown"></i> ti-crown
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-comments"></i> ti-comments
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-comment"></i> ti-comment
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-comment-alt"></i> ti-comment-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-thought"></i> ti-thought
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-clip"></i> ti-clip
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-check"></i> ti-check
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-check-box"></i> ti-check-box
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-camera"></i> ti-camera
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-announcement"></i> ti-announcement
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-brush"></i> ti-brush
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-brush-alt"></i> ti-brush-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-palette"></i> ti-palette
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-briefcase"></i> ti-briefcase
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bolt"></i> ti-bolt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bolt-alt"></i> ti-bolt-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-blackboard"></i> ti-blackboard
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bag"></i> ti-bag
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-world"></i> ti-world
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-wheelchair"></i> ti-wheelchair
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-car"></i> ti-car
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-truck"></i> ti-truck
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-timer"></i> ti-timer
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-ticket"></i> ti-ticket
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-thumb-up"></i> ti-thumb-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-thumb-down"></i> ti-thumb-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-stats-up"></i> ti-stats-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-stats-down"></i> ti-stats-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shine"></i> ti-shine
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shift-right"></i> ti-shift-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shift-left"></i> ti-shift-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shift-right-alt"></i> ti-shift-right-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shift-left-alt"></i> ti-shift-left-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shield"></i> ti-shield
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-notepad"></i> ti-notepad
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-server"></i> ti-server
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pulse"></i> ti-pulse
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-printer"></i> ti-printer
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-power-off"></i> ti-power-off
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-plug"></i> ti-plug
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pie-chart"></i> ti-pie-chart
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-panel"></i> ti-panel
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-package"></i> ti-package
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-music"></i> ti-music
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-music-alt"></i> ti-music-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-mouse"></i> ti-mouse
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-mouse-alt"></i> ti-mouse-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-money"></i> ti-money
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-microphone"></i> ti-microphone
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-menu"></i> ti-menu
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-menu-alt"></i> ti-menu-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-map"></i> ti-map
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-map-alt"></i> ti-map-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-location-pin"></i> ti-location-pin
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-light-bulb"></i> ti-light-bulb
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-info"></i> ti-info
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-infinite"></i> ti-infinite
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-id-badge"></i> ti-id-badge
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-hummer"></i> ti-hummer
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-home"></i> ti-home
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-help"></i> ti-help
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-headphone"></i> ti-headphone
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-harddrives"></i> ti-harddrives
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-harddrive"></i> ti-harddrive
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-gift"></i> ti-gift
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-game"></i> ti-game
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-filter"></i> ti-filter
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-files"></i> ti-files
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-file"></i> ti-file
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-zip"></i> ti-zip
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-folder"></i> ti-folder
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-envelope"></i> ti-envelope
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-dashboard"></i> ti-dashboard
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-cloud"></i> ti-cloud
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-cloud-up"></i> ti-cloud-up
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-cloud-down"></i> ti-cloud-down
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-clipboard"></i> ti-clipboard
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-calendar"></i> ti-calendar
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-book"></i> ti-book
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bell"></i> ti-bell
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-basketball"></i> ti-basketball
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bar-chart"></i> ti-bar-chart
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-bar-chart-alt"></i> ti-bar-chart-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-archive"></i> ti-archive
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-anchor"></i> ti-anchor
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-alert"></i> ti-alert
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-alarm-clock"></i> ti-alarm-clock
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-agenda"></i> ti-agenda
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-write"></i> ti-write
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-wallet"></i> ti-wallet
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-video-clapper"></i> ti-video-clapper
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-video-camera"></i> ti-video-camera
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-vector"></i> ti-vector
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-support"></i> ti-support
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-stamp"></i> ti-stamp
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-slice"></i> ti-slice
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-shortcode"></i> ti-shortcode
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-receipt"></i> ti-receipt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pin2"></i> ti-pin2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pin-alt"></i> ti-pin-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pencil-alt2"></i> ti-pencil-alt2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-eraser"></i> ti-eraser
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-more"></i> ti-more
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-more-alt"></i> ti-more-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-microphone-alt"></i> ti-microphone-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-magnet"></i> ti-magnet
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-line-double"></i> ti-line-double
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-line-dotted"></i> ti-line-dotted
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-line-dashed"></i> ti-line-dashed
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-ink-pen"></i> ti-ink-pen
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-info-alt"></i> ti-info-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-help-alt"></i> ti-help-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-headphone-alt"></i> ti-headphone-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-gallery"></i> ti-gallery
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-face-smile"></i> ti-face-smile
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-face-sad"></i> ti-face-sad
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-credit-card"></i> ti-credit-card
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-comments-smiley"></i> ti-comments-smiley
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-time"></i> ti-time
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-share"></i> ti-share
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-share-alt"></i> ti-share-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-rocket"></i> ti-rocket
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-new-window"></i> ti-new-window
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-rss"></i> ti-rss
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-rss-alt"></i> ti-rss-alt
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Control Icons</h5>
									<div class="row the-icons">
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-stop"></i> ti-control-stop
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-shuffle"></i> ti-control-shuffle
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-play"></i> ti-control-play
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-pause"></i> ti-control-pause
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-forward"></i> ti-control-forward
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-backward"></i> ti-control-backward
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-volume"></i> ti-volume
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-skip-forward"></i> ti-control-skip-forward
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-skip-backward"></i> ti-control-skip-backward
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-record"></i> ti-control-record
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-control-eject"></i> ti-control-eject
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Text Editor</h5>
									<div class="row the-icons">
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-paragraph"></i> ti-paragraph
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-uppercase"></i> ti-uppercase
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-underline"></i> ti-underline
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-text"></i> ti-text
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-Italic"></i> ti-Italic
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-smallcap"></i> ti-smallcap
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-list"></i> ti-list
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-list-ol"></i> ti-list-ol
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-align-right"></i> ti-align-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-align-left"></i> ti-align-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-align-justify"></i> ti-align-justify
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-align-center"></i> ti-align-center
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-quote-right"></i> ti-quote-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-quote-left"></i> ti-quote-left
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Layout Icons</h5>
									<div class="row the-icons">
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-width-full"></i> ti-layout-width-full
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-width-default"></i> ti-layout-width-default
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-width-default-alt"></i> ti-layout-width-default-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-tab"></i> ti-layout-tab
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-tab-window"></i> ti-layout-tab-window
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-tab-v"></i> ti-layout-tab-v
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-tab-min"></i> ti-layout-tab-min
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-slider"></i> ti-layout-slider
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-slider-alt"></i> ti-layout-slider-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-sidebar-right"></i> ti-layout-sidebar-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-sidebar-none"></i> ti-layout-sidebar-none
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-sidebar-left"></i> ti-layout-sidebar-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-placeholder"></i> ti-layout-placeholder
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-menu"></i> ti-layout-menu
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-menu-v"></i> ti-layout-menu-v
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-menu-separated"></i> ti-layout-menu-separated
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-menu-full"></i> ti-layout-menu-full
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-right"></i> ti-layout-media-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-right-alt"></i> ti-layout-media-right-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-overlay"></i> ti-layout-media-overlay
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-overlay-alt"></i> ti-layout-media-overlay-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-overlay-alt-2"></i> ti-layout-media-overlay-alt-2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-left"></i> ti-layout-media-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-left-alt"></i> ti-layout-media-left-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-center"></i> ti-layout-media-center
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-media-center-alt"></i> ti-layout-media-center-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-list-thumb"></i> ti-layout-list-thumb
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-list-thumb-alt"></i> ti-layout-list-thumb-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-list-post"></i> ti-layout-list-post
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-list-large-image"></i> ti-layout-list-large-image
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-line-solid"></i> ti-layout-line-solid
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-grid4"></i> ti-layout-grid4
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-grid3"></i> ti-layout-grid3
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-grid2"></i> ti-layout-grid2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-grid2-thumb"></i> ti-layout-grid2-thumb
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-cta-right"></i> ti-layout-cta-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-cta-left"></i> ti-layout-cta-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-cta-center"></i> ti-layout-cta-center
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-cta-btn-right"></i> ti-layout-cta-btn-right
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-cta-btn-left"></i> ti-layout-cta-btn-left
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-column4"></i> ti-layout-column4
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-column3"></i> ti-layout-column3
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-column2"></i> ti-layout-column2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-accordion-separated"></i> ti-layout-accordion-separated
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-accordion-merged"></i> ti-layout-accordion-merged
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-accordion-list"></i> ti-layout-accordion-list
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-widgetized"></i> ti-widgetized
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-widget"></i> ti-widget
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-widget-alt"></i> ti-widget-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-view-list"></i> ti-view-list
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-view-list-alt"></i> ti-view-list-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-view-grid"></i> ti-view-grid
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-upload"></i> ti-upload
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-download"></i> ti-download
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-loop"></i> ti-loop
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-sidebar-2"></i> ti-layout-sidebar-2
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-grid4-alt"></i> ti-layout-grid4-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-grid3-alt"></i> ti-layout-grid3-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-grid2-alt"></i> ti-layout-grid2-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-column4-alt"></i> ti-layout-column4-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-column3-alt"></i> ti-layout-column3-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-layout-column2-alt"></i> ti-layout-column2-alt
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Brand Icons</h5>
									<div class="row the-icons">
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-flickr"></i> ti-flickr
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-flickr-alt"></i> ti-flickr-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-instagram"></i> ti-instagram
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-google"></i> ti-google
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-github"></i> ti-github
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-facebook"></i> ti-facebook
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-dropbox"></i> ti-dropbox
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-dropbox-alt"></i> ti-dropbox-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-dribbble"></i> ti-dribbble
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-apple"></i> ti-apple
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-android"></i> ti-android
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-yahoo"></i> ti-yahoo
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-trello"></i> ti-trello
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-stack-overflow"></i> ti-stack-overflow
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-soundcloud"></i> ti-soundcloud
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-sharethis"></i> ti-sharethis
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-sharethis-alt"></i> ti-sharethis-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-reddit"></i> ti-reddit
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-microsoft"></i> ti-microsoft
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-microsoft-alt"></i> ti-microsoft-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-linux"></i> ti-linux
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-jsfiddle"></i> ti-jsfiddle
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-joomla"></i> ti-joomla
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-html5"></i> ti-html5
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-css3"></i> ti-css3
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-drupal"></i> ti-drupal
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-wordpress"></i> ti-wordpress
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-tumblr"></i> ti-tumblr
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-tumblr-alt"></i> ti-tumblr-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-skype"></i> ti-skype
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-youtube"></i> ti-youtube
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-vimeo"></i> ti-vimeo
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-vimeo-alt"></i> ti-vimeo-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-twitter"></i> ti-twitter
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-twitter-alt"></i> ti-twitter-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-linkedin"></i> ti-linkedin
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pinterest"></i> ti-pinterest
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-pinterest-alt"></i> ti-pinterest-alt
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-themify-logo"></i> ti-themify-logo
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-themify-favicon"></i> ti-themify-favicon
										</div>
										<div class="fa-hover col-md-3 col-sm-4">
											<i class="ti-themify-favicon-alt"></i> ti-themify-favicon-alt
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: FONTAWESOME ICONS -->
					</div>
				</div>
			</div>
			<!-- start: FOOTER -->
			<footer>
				<div class="footer-inner">
					<div class="pull-left">
						&copy; <span class="current-year"></span><span class="text-bold text-uppercase">ClipTheme</span>. <span>All rights reserved</span>
					</div>
					<div class="pull-right">
						<span class="go-top"><i class="ti-angle-up"></i></span>
					</div>
				</div>
			</footer>
			<!-- end: FOOTER -->
			<!-- start: OFF-SIDEBAR -->
			<div id="off-sidebar" class="sidebar">
				<div class="sidebar-wrapper">
					<ul class="nav nav-tabs nav-justified">
						<li class="active">
							<a href="#off-users" aria-controls="off-users" role="tab" data-toggle="tab">
								<i class="ti-comments"></i>
							</a>
						</li>
						<li>
							<a href="#off-favorites" aria-controls="off-favorites" role="tab" data-toggle="tab">
								<i class="ti-heart"></i>
							</a>
						</li>
						<li>
							<a href="#off-settings" aria-controls="off-settings" role="tab" data-toggle="tab">
								<i class="ti-settings"></i>
							</a>
						</li>
					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active" id="off-users">
							<div id="users" toggleable active-class="chat-open">
								<div class="users-list">
									<div class="sidebar-content perfect-scrollbar">
										<h5 class="sidebar-title">On-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-3.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
										<h5 class="sidebar-title">Off-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-8.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-9.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="user-chat">
									<div class="chat-content">
										<div class="sidebar-content perfect-scrollbar">
											<a class="sidebar-back pull-left" href="#" data-toggle-class="chat-open" data-toggle-target="#users"><i class="ti-angle-left"></i> <span>Back</span></a>
											<ol class="discussion">
												<li class="messages-date">
													Sunday, Feb 9, 12:58
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, Nicole
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How are you?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Hi, i am good
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Glad to see you ;)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 13:10
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															What do you think about my new Dashboard?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 15:28
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Alo...
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Are you there?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, i am here
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Your Dashboard is great
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Friday, Feb 7, 23:39
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How does the binding and digesting work in AngularJS?, Peter?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															oh that's your question?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															little reduntant, no?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															literally we get the question daily
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															I know. I, however, am not a nerd, and want to know
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															for this type of question, wouldn't it be better to try Google?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Lucky for us :)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
											</ol>
										</div>
									</div>
									<div class="message-bar">
										<div class="message-inner">
											<a class="link icon-only" href="#"><i class="fa fa-camera"></i></a>
											<div class="message-area">
												<textarea placeholder="Message"></textarea>
											</div>
											<a class="link" href="#">
												Send
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-favorites">
							<div class="users-list">
								<div class="sidebar-content perfect-scrollbar">
									<h5 class="sidebar-title">Favorites</h5>
									<ul class="media-list">
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Nicole Bell</h4>
													<span> Content Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<div class="user-label">
													<span class="label label-success">3</span>
												</div>
												<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Steven Thompson</h4>
													<span> Visual Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-settings">
							<div class="sidebar-content perfect-scrollbar">
								<h5 class="sidebar-title">General Settings</h5>
								<ul class="media-list">
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Enable Notifications</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show your E-mail</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show Offline Users</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">E-mail Alerts</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">SMS Alerts</span>
										</div>
									</li>
								</ul>
								<div class="save-options">
									<button class="btn btn-success">
										<i class="icon-settings"></i><span>Save Changes</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end: OFF-SIDEBAR -->
			<!-- start: SETTINGS -->
			<div class="settings panel panel-default hidden-xs hidden-sm" id="settings">
				<button ct-toggle="toggle" data-toggle-class="active" data-toggle-target="#settings" class="btn btn-default">
					<i class="fa fa-spin fa-gear"></i>
				</button>
				<div class="panel-heading">
					Style Selector
				</div>
				<div class="panel-body">
					<!-- start: FIXED HEADER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left"> Fixed header</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-header" />
						</span>
					</div>
					<!-- end: FIXED HEADER -->
					<!-- start: FIXED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-sidebar" />
						</span>
					</div>
					<!-- end: FIXED SIDEBAR -->
					<!-- start: CLOSED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Closed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="closed-sidebar" />
						</span>
					</div>
					<!-- end: CLOSED SIDEBAR -->
					<!-- start: FIXED FOOTER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed footer</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-footer" />
						</span>
					</div>
					<!-- end: FIXED FOOTER -->
					<!-- start: THEME SWITCHER -->
					<div class="colors-row setting-box">
						<div class="color-theme theme-1">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-1">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-2">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-2">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-3">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-3">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-4">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-4">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-5">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-5">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-6">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-6">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<!-- end: THEME SWITCHER -->
				</div>
			</div>
			<!-- end: SETTINGS -->
		</div>
		<!-- start: MAIN JAVASCRIPTS -->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="vendor/modernizr/modernizr.js"></script>
		<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
		<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
		<script src="vendor/switchery/switchery.min.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: CLIP-TWO JAVASCRIPTS -->
		<script src="assets/js/main.js"></script>
		<!-- start: JavaScript Event Handlers for this page -->
		<script>
			jQuery(document).ready(function() {
				Main.init();
			});
		</script>
		<!-- end: JavaScript Event Handlers for this page -->
		<!-- end: CLIP-TWO JAVASCRIPTS -->
	</body>
</html>
